<template>
  <div class="order-manage-finish">
    <a-card>
      已发布订单
      <div style="text-align: right;">
        <a-input v-model="searchData.orderNumber" placeholder="请输入想要查询的订单编号" style="width: 280px;margin-right: 20px;"></a-input>
        <a-range-picker v-model="searchData.date"  style="margin-right: 20px;" :allow-clear="false" />
        <a-button type="primary" @click="loadWhenMounted">查询</a-button>
      </div>
  </a-card>
  <br>
  <a-card>
    <span slot="title">详细数据</span>
    <a-tabs :default-active-key="$store.state.currentTable" @change="changeTabs">
      <a-tab-pane key="publish">
        <span slot="tab"><a-icon type="to-top" />已发布</span>
        <a-table
          bordered
          row-key="id"
          :loading="publishLoading"
          :columns="publishColumns"
          :data-source="publishData"
          :pagination="publishPage"
          @change="(value) => {this.changePage(value, 'publish')}"
        >
          <span slot="createTime" slot-scope="createTime">
            {{ transformFormatDate(createTime) }}
          </span>
          <span slot="status" slot-scope="status">
            {{ status === 1 ? '已发布' : '数据有误' }}
          </span>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="repairing">
        <span slot="tab"><a-icon type="loading-3-quarters" />进行中</span>
        <a-table
          bordered
          row-key="id"
          :loading="repairingLoading"
          :columns="repairingColumns"
          :data-source="repairingData"
          :pagination="repairPage"
          @change="(value) => {this.changePage(value, 'repair')}"
        >
          <span slot="createTime" slot-scope="createTime">
            {{ transformFormatDate(createTime) }}
          </span>
          <span slot="serverTime" slot-scope="serverTime">
            {{ transformFormatDate(serverTime) }}
          </span>
          <span slot="status" slot-scope="status">
            {{ status === 2 ? '维修进行中' : '数据有误' }}
          </span>
        </a-table>
      </a-tab-pane>
      <a-tab-pane key="finish">
        <span slot="tab"><a-icon type="check-circle" />已完成</span>
        <a-table 
          bordered
          row-key="id"
          :loading="finishLoading"
          :columns="finishColumns"
          :data-source="finishData"
          :pagination="finishPage"
          @change="(value) => {this.changePage(value, 'finish')}"
        >
          <span slot="createTime" slot-scope="createTime">
            {{ transformFormatDate(createTime) }}
          </span>
          <span slot="serverTime" slot-scope="serverTime">
            {{ transformFormatDate(serverTime) }}
          </span>
          <span slot="finishTime" slot-scope="finishTime">
            {{ transformFormatDate(finishTime) }}
          </span>
          <span slot="evaluation" slot-scope="evaluation">
            <span v-if="evaluation === -1">暂无评价</span>
            <a-rate :value="evaluation" v-else></a-rate>
          </span>
          <span slot="status" slot-scope="status">
            {{ status === 3 ? '已完成' : '数据有误' }}
          </span>
          <template slot="expandedRowRender" slot-scope="data">
            <a-form-model :label-col="{ span: 3 }" :wrapper-col="{ span: 10 }" :labelAlign="'left'">
              <a-form-model-item label="用户姓名">{{ data.userInfo.name }}</a-form-model-item>
              <a-form-model-item label="用户编号">{{ data.userInfo.userIdentify }}</a-form-model-item>
              <a-form-model-item label="用户地址">{{ data.userInfo.userAddress }}</a-form-model-item>
              <a-form-model-item label="用户联系方式">{{ data.userInfo.userPhone }}</a-form-model-item>
              <a-form-model-item label="维修工编号">{{ data.workerInfo.workerIdentify }}</a-form-model-item>
              <a-form-model-item label="维修工姓名">{{ data.workerInfo.name }}</a-form-model-item>
              <a-form-model-item label="维修类型">{{ data.workerInfo.repairType }}</a-form-model-item>
              <a-form-model-item label="维修工联系方式">{{ data.workerInfo.workerPhone }}</a-form-model-item>
            </a-form-model>
          </template>
        </a-table>
      </a-tab-pane>
    </a-tabs>
  </a-card>
  </div>
</template>

<script>
import { getOrderList } from '../../api/api';
import { formatDate } from '@/lib/common';
import moment from 'moment';

export default {
  name: 'Finish',
  data() {
    return {
      publishColumns: [
        { title: '订单编号', dataIndex: 'orderNumber', key: 'orderNumber' },
        { title: '描述信息', dataIndex: 'desc', key: 'desc' },
        { title: '订单创建时间', dataIndex: 'createTime', key: 'createtTime', scopedSlots: { customRender: 'createTime' } },
        { title: '订单状态', dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' } },
        { title: '用户姓名', dataIndex: 'userInfo.name', key: 'userInfo.name' },
        { title: '用户地址', dataIndex: 'userInfo.userAddress', key: 'userInfo.userAddress' },
      ],
      publishData: [],
      publishLoading: false,
      publishPage: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      repairingColumns: [
        { title: '订单编号', dataIndex: 'orderNumber', key: 'orderNumber' },
        { title: '描述信息', dataIndex: 'desc', key: 'desc' },
        { title: '订单创建时间', dataIndex: 'createTime', key: 'createtTime', scopedSlots: { customRender: 'createTime' } },
        { title: '服务时间', dataIndex: 'serverTime', key: 'serverTime', scopedSlots: { customRender: 'serverTime' } },
        { title: '订单状态', dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' } },
        { title: '用户姓名', dataIndex: 'userInfo.name', key: 'userInfo.name' },
        { title: '用户地址', dataIndex: 'userInfo.userAddress', key: 'userInfo.userAddress' },
        { title: '维修工姓名', dataIndex: 'workerInfo.name', key: 'workerInfo.name' },
        { title: '维修类型', dataIndex: 'workerInfo.repairType', key: 'workerInfo.repairType' },
      ],
      repairingData: [],
      repairingLoading: false,
      repairPage: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      finishColumns: [
        { title: '订单编号', dataIndex: 'orderNumber', key: 'orderNumber' },
        { title: '描述信息', dataIndex: 'desc', key: 'desc' },
        { title: '订单创建时间', dataIndex: 'createTime', key: 'createtTime', scopedSlots: { customRender: 'createTime' } },
        { title: '服务时间', dataIndex: 'serverTime', key: 'serverTime', scopedSlots: { customRender: 'serverTime' } },
        { title: '订单完成时间', dataIndex: 'finishTime', key: 'finishTime', scopedSlots: { customRender: 'finishTime' } },
        { title: '订单状态', dataIndex: 'status', key: 'status', scopedSlots: { customRender: 'status' } },
        { title: '最终价格', dataIndex: 'finalPrice', key: 'finalPrice' },
        { title: '评价', dataIndex: 'evaluation', key: 'evaluation', scopedSlots: { customRender: 'evaluation' }, width: 180 },
      ],
      finishData: [],
      finishLoading: false,
      finishPage: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      searchData: {
        orderNumber: '',
        date: [
          moment(moment(new Date(new Date().toLocaleDateString()).getTime())),
          moment(moment(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)),
        ],
      },
    }
  },
  methods: {
    /**
     * 时间戳转换为日期
     * @param data 时间戳
     */
    transformFormatDate(data) {
      return formatDate(parseInt(data));
    },
    /**
     * 面板切换
     */
    changeTabs(activeKey) {
      this.publishPage.current = this.repairPage.current = this.finishPage.current = 1;
      this.$store.commit('setCurTable', activeKey);
      switch (activeKey) {
        case 'publish':
          this.getOrderListPublish();
          break;
        case 'repairing':
          this.getOrderListRepairing();
          break;
        case 'finish':
          this.getOrderListFinish();
          break;
      }
    },
    /**
     * 获取已发布数据
     */
    getOrderListPublish() {
      this.publishLoading = true;
      let options = {
        page: this.publishPage.current,
        size: this.publishPage.pageSize,
        orderNumber: this.searchData.orderNumber,
        startTime: moment(this.searchData.date[0]).unix() * 1000,
        endTime: moment(this.searchData.date[1]).unix() * 1000,
        evaluation: '',
        status: 1
      }
      getOrderList(options)
        .then(res => {
          let data = res.data;
          this.publishData = data.list;
          this.publishPage.total = data.total;
        })
        .catch(err => {
          this.$message.error(`获取已发布订单列表失败，${err.data}`);
        })
        .finally(() => {
          this.publishLoading = false;
        })
    },
    /**
     * 获取进行中订单
     */
    getOrderListRepairing() {
      this.repairingLoading = true;
      let options = {
        page: this.repairPage.current,
        size: this.repairPage.pageSize,
        orderNumber: this.searchData.orderNumber,
        startTime: moment(this.searchData.date[0]).unix() * 1000,
        endTime: moment(this.searchData.date[1]).unix() * 1000,
        evaluation: '',
        status: 2
      }
      getOrderList(options)
        .then(res => {
          let data = res.data;
          this.repairingData = data.list;
          this.repairPage.total = data.total;
        })
        .catch(err => {
          this.$message.error(`获取进行中订单列表失败，${err.data}`);
        })
        .finally(() => {
          this.repairingLoading = false;
        })
    },
    /**
     * 获取已完成订单
     */
    getOrderListFinish() {
      this.finishLoading = true;
      let options = {
        page: this.finishPage.current,
        size: this.finishPage.pageSize,
        orderNumber: this.searchData.orderNumber,
        startTime: moment(this.searchData.date[0]).unix() * 1000,
        endTime: moment(this.searchData.date[1]).unix() * 1000,
        evaluation: '',
        status: 3
      }
      getOrderList(options)
        .then(res => {
          let data = res.data;
          this.finishData = data.list;
          this.finishPage.total = data.total;
        })
        .catch(err => {
          this.$message.error(`获取已完成订单列表失败，${err.data}`);
        })
        .finally(() => {
          this.finishLoading = false;
        })
    },
    /**
     * 分页的方法
     */
    changePage(value, symbol) {
      const { current } = value;
      switch(symbol) {
        case 'publish':
          this.publishPage.current = current;
          this.getOrderListPublish();
          break;
        case 'repair':
          this.repairPage.current = current;
          this.getOrderListRepairing();
          break;
        case 'finish':
          this.finishPage.current = current;
          this.getOrderListFinish();
          break;
      }
    },
    /**
     * 页面刚加载时加载数据
     */
    loadWhenMounted() {
      switch(this.$store.state.currentTable){
        case 'publish':
          this.getOrderListPublish();
          break;
        case 'repairing':
          this.getOrderListRepairing();
          break;
        case 'finish':
          this.getOrderListFinish();
          break;
      }
    },
    /**
     * 查询数据
     */
    searchDataInfo() {
      const { orderNumber, date } = this.searchData;
      switch(this.$store.state.currentTable){
        case 'publish':
          this.
          this.getOrderListPublish();
          break;
        case 'repairing':
          this.getOrderListRepairing();
          break;
        case 'finish':
          this.getOrderListFinish();
          break;
      }
    }
  },
  mounted() {
    this.loadWhenMounted();
  }
}
</script>

<style lang="scss">

</style>